<template>
  <el-scrollbar height="100%">
    <div class="w preview">
      <el-row :gutter="30">
        <el-col :span="14">
          <el-card style="background-color: #0f1827;border: #0f1827">
            <video :src="BASE_URL + url"
                   style="width: 100%;height: 400px;"
                   controls/>
          </el-card>
        </el-col>
        <el-col :span="10">
          <div style="overflow: hidden">
            <div style="background-color:#ffd04b;width: 10px;height: 30px;float: left"></div>
            <div style="float: left;margin-left: 10px">
              <span style="color: #FFFFFF;font-size: 20px;font-weight: bold;">火热来袭</span>
            </div>
          </div>
          <div style="margin-top: 10px">
            <el-scrollbar height="400px">
              <div style="width: 98%">
                <el-row :gutter="10">
                  <el-col :span="24" style="margin-top: 10px;"
                          @click="changeVideoUrl(item.videoUrl)"
                          :title=" item.title"
                          v-for="item in homePreviewData">
                    <el-row :gutter="10">
                      <el-col :span="11">
                        <div style="position: relative">
                          <el-image :src="BASE_URL + item.thumbnail"
                                    style="width: 200px;height: 115px;"
                                    alt="Film poster"/>
                          <div class="mask"></div>
                          <div class="mask-text">
                            <p>{{ item.minute }} : {{ item.second }}</p>
                          </div>
                        </div>
                      </el-col>
                      <el-col :span="13">
                        <div style="	width: 100%;
                            overflow: hidden;text-overflow: ellipsis;	display: -webkit-box;
	                              	-webkit-line-clamp: 1;	-webkit-box-orient: vertical;">
                          <p style="font-weight: bold;line-height: 115px;color: #FFFFFF;margin: 0;">{{ item.title }}</p>
                        </div>
                      </el-col>
                    </el-row>
                  </el-col>
                </el-row>
              </div>
            </el-scrollbar>
          </div>
        </el-col>
      </el-row>
    </div>

    <div class="w">
      <div style="text-align: center;margin-top: 10px">
        <el-row :gutter="10">
          <el-col :span="4" v-for="item in filmData">
            <div style="margin-top: 20px">
              <div style="position: relative">
                <el-image :src="BASE_URL + item.poster"
                          style="width: 80%;height: auto;margin: 0 auto;position: relative;z-index: 1"
                          alt="Film poster"/>
                <div style="position: absolute;bottom: 0;left: 50%; transform: translateX(-50%);z-index: 2;
                        width: 80%;height: 100%;
                       background: linear-gradient(360deg, #0f1827 8%, rgba(15, 24, 39, 0) 70%);   "
                     @click="watchPreview(item.id)">
                  <p style="position: absolute;bottom: 0;left: 50%;width: 80%;
                              transform: translateX(-50%);z-index: 3;color: #FFFFFF;
                              font-size: 16px;font-weight: bold;">{{ item.filmName }} </p>
                </div>
              </div>
              <el-button @click="watchPreview(item.id)"
                         style="width: 80%;border-radius: 0 ; border: #671523;
                                background-color: #671523;color: #FFFFFF">观 看
              </el-button>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  </el-scrollbar>
</template>

<script setup>
import {onMounted, ref} from "vue";
import {ElMessage} from "element-plus";
import axios from "axios";
import qs from "qs";
import router from "@/router";

const url = ref('');
const homePreviewData = ref([]);
const search = () => {
  axios.get(BASE_URL + '/v1/previewSort/select/').then((response) => {
    if (response.data.code === 2000) {
      homePreviewData.value = response.data.data;
      url.value = response.data.data[0].videoUrl;
    } else {
      ElMessage({
        message: response.data.msg,
        type: 'error',
        showClose: true,
        center: true,
      });
    }
  })
}
onMounted(() => {
  search();
})
const changeVideoUrl = (videoUrl) => {
  url.value = videoUrl;
}

const searchFilmForm = ref({
  releaseStatus: '0'
});

const filmData = ref([])
const searchFilm = () => {
  let data = qs.stringify(searchFilmForm.value);
  console.log(data);
  axios.get(BASE_URL + '/v1/film/select/userFilm?' + data)
      .then((response) => {
        if (response.data.code === 2000) {
          filmData.value = response.data.data;
        } else {
          ElMessage({
            message: response.data.msg,
            type: 'error',
            showClose: true,
            center: true,
          });
        }
      });
}
onMounted(() => {
  searchFilm();
})
const watchPreview = (filmId) => {
  router.push('/watchPreviewByFilmId?filmId=' + filmId)
}
</script>

<style scoped>
.preview {
  height: auto;
}

.mask {
  width: 200px;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  background: linear-gradient(360deg, #0f1827 10%, rgba(15, 24, 39, 0) 70%);
}

.mask-text {
  position: absolute;
  bottom: 0;
  right: 10px;
  z-index: 2;
  color: #fff;
}
</style>